import React from "react";
import { useState } from "react";
import "./Showimg.css";

export default function Showimg() {
  let [imgarr] = useState([
    "/img/1.jpg",
    "/img/2.jpg",
    "/img/3.jpg",
    "/img/4.jpg",
    "/img/5.jpg",
  ]);

  let [maximg, setmaximg] = useState(1);

  let changeimg = (index) => {
    return () => {
      setmaximg(index);
    };
  };
  return (
    <>
      <div className="Showimg">
        <div className="maximg">
          <img src={`/img/${maximg}.jpg`} alt="" />
        </div>
        <div className="minimg">
          <ul>
            {imgarr.map((item, index) => {
              return (
                <li key={index}>
                  <img
                    src={item}
                    alt=""
                    onMouseOver={changeimg(index + 1)}
                    className={index + 1 === maximg ? "active" : null}
                  />
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  );
}
